<template>
    <div id="main-box">

    <div class="title">
    <van-nav-bar
            title="限时秒杀"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
    />
    </div>

    <div class="banner-goods" style="margin-left:25px" >
        <van-grid :border="false" :column-num="4">
            <template v-for="(item,i) in goodsInfo.slice(0,4)">
            <van-grid-item :key="i">
                <div>
                <van-image :src="imgsrc+item.img" style="height:120px;width:120px" />
                </div>
                <div>
                    <div class="van-multi-ellipsis--l2" style="font-size:12px" >{{item.title}}</div>
<!--                    <div  style="margin-left:25px;margin-top:10px">￥{{item.price}}</div>-->
                </div>
                        <div>
                            <div class="price" style="margin-top: 10px">
                         <span class="miaosha"  @click="buy(item.id,2)">￥{{item.seckillPrice}}
                          <i></i>
                        </span>
                                <span class="origin">￥{{item.price}}
                                    </span>
                            </div>
                        </div>
            </van-grid-item>
            </template>
        </van-grid>
    </div>

        <div class="times" style="margin-top:10px">
            <van-tabs type="card">
                <van-tab title="秒杀活动正在进行...">
                    <template v-for="(item,i) in goodsInfo.slice(3,6)">
                    <div class="goodsdetail" :key="i">
                        <van-card

                                :title="item.title"
                                :thumb="imgsrc+item.img"
                        >
                            <template #footer>
                                <div class="price" style="margin-left:100px">
                         <span class="miaosha"  @click="buy(item.id,2)">￥{{item.seckillPrice}}
                          <i></i>
                        </span>
                                    <span class="origin">￥{{item.price}}
                                    </span>
                                </div>
<!--                                <van-button round size="mini" type="danger" @click="buy(item.id,1)">立即抢</van-button>-->
                            </template>
                        </van-card>
                    </div>
                    </template>
                </van-tab>
            </van-tabs>
        </div>



    </div>
</template>

<script>
    import {getSkillGoods} from "@/api/api";
    import img from "@/api/api"
    import {Toast} from "vant";
    export default {
        name: "seckillDetail"
        ,
        data(){
          return{
              goodsInfo:[],
              imgsrc:img.src,
          }
        },
        methods: {
            buy(gid,aid){
                this.$router.push({
                    path: '/goodDetail',
                    query: {
                        goodId: gid,
                        aid:aid
                    }
                })
                    },
            onClickLeft(){
                this.$router.push({path:'/dashboard/home'})
            },
    },
        created() {


                getSkillGoods().then((response) => {
                    if(response.data.code===2000){
                        this.goodsInfo=response.data.data.goodList;
                    }else {
                    Toast(response.data.message);
                    }
            });
        },
    };
</script>

<style scoped>
.goodsdetail{
    width:95%;
    height:150px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5px
}
#main-box{
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.price {
    width: 140px;
    height: 24px;
    line-height: 24px;
    border: 1px solid red;
    margin: 0 auto;


}
.miaosha {
    position: relative;
    float: left;
    width: 70px;
    height: 100%;
    background-color: red;
    text-align: center;
    color: #fff;
    font-weight: 700;
    margin-right: 8px;

}
.miaosha i {
    position:absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    border-width: 24px 10px 0 0;

}
.origin {
    font-size: 10px;
    color:gray;
    text-decoration: line-through;
}

</style>